import { computed, defineComponent, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import caseName from '../script/utils/case-name';
import Logo from './assets/teld.svg';
import styles from './layout.module.scss';
import componentMenus from './menus';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    let route = useRoute();
    let router = useRouter();

    const link = ref('');
    const searchModel = ref('');
    const collapsed = ref(false);
    const components = computed(() => {
      return componentMenus.filter(v => {
        let s = searchModel.value;
        let b = [v.value, v.label].some(v_ => {
          return v_?.toLowerCase?.().includes(s?.toLowerCase?.());
        });
        return b;
      });
    });

    return () => {
      let defaultSelectedKey = caseName(route.name).kebabCaseName;

      return (
        <div class={styles.module}>
          <div class={[styles.sider, collapsed.value && styles.collapsed]}>
            {
              <>
                <div class={styles.logo}>
                  <Logo />
                  <span>特来电组件库</span>
                </div>

                <t-input
                  class={'tr-input-default',styles.search}
                  v-model={searchModel.value}
                  placeholder='请输入过滤条件'
                  label='过滤'
                  borderType='borderless'
                  hideLabel
                  v-slots={{
                    append() {
                      return !searchModel.value ? (
                        <t-icon name='search' />
                      ) : (
                        <t-icon
                          name='clear'
                          class='cursor-pointer'
                          onClick={() => {
                            searchModel.value = '';
                          }}
                        />
                      );
                    },
                  }}
                ></t-input>
              </>
            }
            <t-list class={styles.menu} dense padding separator={false}>
              {components.value.map(v => {
                let k =
                  v.value == 'Editor-v2'
                    ? caseName(`t-${v.value}`).capitalizeName.toLowerCase()
                    : caseName(`t-${v.value}`).kebabCaseName;
                return (
                  <t-item
                    key={k}
                    clickable
                    v-ripple
                    active={[link.value, defaultSelectedKey].includes(k)}
                    class={styles.item}
                    active-class={styles.itemActive}
                    onClick={e => {
                      link.value = k;
                      router.push(k);
                    }}
                  >
                    <t-item-section class={[styles.itemSection]}>
                      <div class={[styles.label, 'text-overflow-ellipsis']}>
                        {!!v.label && <span>{v.label}</span>}
                        <span>{caseName(v.value).ComponentsCaseName}</span>
                      </div>
                    </t-item-section>
                  </t-item>
                );
              })}
            </t-list>
          </div>

          <div class={styles.collapseBtn} onClick={() => collapsed.value = !collapsed.value}>
            <t-icon name={collapsed.value ? 'menu' : 'menu_open'} />
          </div>

          <div class={styles.content}>
            <RouterView />
          </div>
        </div>
      );
    };
  },
});
